<template>
  <div :id="id"></div>
</template>

<script>
import {Chart} from '@antv/g2';

export default {
  name: "Donut_chart",
  props: {
    id:{
      type:String,
      required: true,
    },
    width: {
      // 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
      // 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
      type: Number,
      // 定义是否必须传
      required: false,
      // 定义默认值
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
  },
  mounted() {
    this.getPlot()
  },
  methods:{
    getPlot(){
      console.log('Donut')
      const chart = new Chart({
        container: this.id,
        width: this.width,
        height: this.height,
      });
      let plotData = require('@/assets/data/Location_statistics_for_ASMs_index_snv.json')

      chart.coordinate({ type: 'polar' , innerRadius: 0.4 });

      chart
          .interval()
          .transform({ type: 'groupX', y: 'sum' })
          .data(plotData)
          .encode('x', 'Location_type')
          .encode('y', 'Frequency')
          .scale('y', { type: 'sqrt' })
          .scale('x', { padding: 0 })
          .encode('color', 'Location_type')
          .label({
            text: 'Location_type',
            position: 'spider',
            // formatter: '~s',
            textAlign: (d) => (['c', 'sass'].includes(d.id) ? 'end' : 'start'),
            dy: -4,
          })
          .axis(false)
          .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
          .scale('color', {
            type: 'ordinal',
            range: ['#7593ed', '#95e3b0', '#6c7893', '#e7c450', '#7460eb'],
          })
          .animate('enter', { type: 'waveIn' })
          .tooltip({ channel: 'y' });//, valueFormatter: '~s'

      chart.render();
    }
  }
}

</script>

<style scoped>

</style>
